<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        #container {
            width: 900px;
            background-color: #ccc;
        }
        #container > div {
            width: 120px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #000;
            border-radius: 5px;
            float: left;
            margin: 5px 5px 0;
        }
        
        #container > div.demo-1 {
            background-color: yellowgreen;
        }
        #container > div.demo-2 {
            background-color: skyblue;
        }
        #container > div.demo-3 {
            background-color: rgb(235, 148, 191);
        }

    </style>
</head>
<body>

    <div id="container">
        <div class="sanguo" data-type="1"><span>曹操</span></div>
        <div class="sanguo" data-type="2"><span>刘备</span></div>
        <div class="sanguo" data-type="3"><span>孙权</span></div>
        <div class="sanguo" data-type="2"><span>孔明</span></div>
        <div class="sanguo" data-type="1"><span>司马懿</span></div>
        <div class="sanguo" data-type="2"><span>关羽</span></div>
        <div class="sanguo" data-type="2"><span>黄忠</span></div>
        <div class="sanguo" data-type="1"><span>许褚</span></div>
        <div class="sanguo" data-type="3"><span>周瑜</span></div>
        <div class="sanguo" data-type="2"><span>张飞</span></div>
        <div class="sanguo" data-type="3"><span>鲁肃</span></div>
        <div class="sanguo" data-type="2"><span>马超</span></div>
        <div class="sanguo" data-type="2"><span>赵云</span></div>
    </div>


    <script>
        // 要求：
            // 根据自定义属性 data-type,设置指定标签的背景色。
         var div =  document.getElementById("container");  
         console.log(div);
         var divs = document.querySelectorAll(".sanguo")
        //  console.log(divs);
        //  var divs = document.div.children;
        //  console.log(divs);
    for(i = 0 ; i < divs.length ; i ++) {
        if(divs[i].getAttribute("data-type") == "1") {
            // divs[i].style["background"] = "blue"; 
            divs[i].className = "demo-1"
        }if(divs[i].getAttribute("data-type") == "2") {
            // divs[i].style["background"] = "red"; 
            divs[i].className = "demo-2"
        }if(divs[i].getAttribute("data-type") == "3") {
            // divs[i].style["background"] = "gray"; 
            divs[i].className = "demo-3"
        }
    }

        


    </script>
</body>
</html>